<!-- 引入 文件 -->
<link rel="stylesheet" href="./leaflet.css" />
<script src="./leaflet.js"> </script>
<!-- 增加地图高度 -->
<style>
#mapDiv { height: 900px; }
</style>
<!-- 创建一个 地图的div id 必须有 但是自定义 -->
<div id="mapDiv"></div>
<script>

        var leafletMap = new L.Map("mapDiv", {
            zoom: 8,   //初始化地图的缩放
            center: [18.260521, 109.517698],  //初始化地图的地理中心.
            boxZoom: true, 
        });
        // var marker = new L.marker([18.260521, 109.517698]);
        // marker.addTo(map);
        var wmsLayer= L.tileLayer.wms("http://localhost:8080/geoserver/map/wms?", {
            layers: 'map:CHINA_2014GDP',//需要加载的图层
            format: 'image/png',//返回的数据格式
            transparent: true,
            //crs: L.CRS.EPSG4326
        });
        console.log(leafletMap.getCenter());
        leafletMap.addLayer(wmsLayer);


        // //mapbox 官网注册并创建下面的access token都是免费的，不过有5w次的浏览限制
        // var url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2FuZXdhbmciLCJhIjoiY2pwM2UxNHNkMGF1MzNwc2FtMnNhdXJsMCJ9.KZpCBtizDeltZO6JhGc6_w';
        // //初始化 地图
        // var leafletMap = L.map('mapDiv').setView([18.260521, 109.517698],  10);
        // //将图层加载到地图上，并设置最大的聚焦还有map样式
        // L.tileLayer(url, {
        //         maxZoom: 12,
        //         id: 'mapbox.streets'
        // }).addTo(leafletMap);

        //增加一个marker ，地图上的标记，并绑定了一个popup，默认打开
        L.marker([18.260521, 109.517698]).addTo(leafletMap)
                .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
        
        //增加一个圈，设置圆心、半径、样式
        L.circle([18.260521, 109.517698], 500, {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5
        }).addTo(leafletMap).bindPopup("I am a circle.");
        
        //增加多边形
        L.polygon([
                [18.400849, 109.004772],
                [18.260521, 109.517698],
                [18.400534, 109.786696]
        ]).addTo(leafletMap).bindPopup("I am a polygon.");
        
        // 为点击地图的事件 增加popup
        var popup = L.popup();
        function onMapClick(e) {
                popup
                        .setLatLng(e.latlng)
                        .setContent("You clicked the map at " + e.latlng.toString())
                        .openOn(leafletMap);
        }
        leafletMap.on('click', onMapClick);
</script>